<template>
  <t-dialog
    :visible="visible"
    header="批量下载选项"
    width="400px"
    :confirm-btn="confirmBtn"
    :cancel-btn="cancelBtn"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  >
    <div class="batch-download-content">
      <p>请选择要下载的内容类型：</p>
      <t-radio-group v-model="downloadOption" variant="default-filled">
        <t-radio-button value="both">音频和字幕</t-radio-button>
        <t-radio-button value="audio">仅音频</t-radio-button>
        <t-radio-button value="caption">仅字幕</t-radio-button>
      </t-radio-group>
    </div>
  </t-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:visible', 'confirm'])

const downloadOption = ref('both')

const confirmBtn = computed(() => ({
  content: '确定下载',
  theme: 'primary'
}))

const cancelBtn = computed(() => ({
  content: '取消',
  theme: 'default'
}))

const handleConfirm = () => {
  emit('confirm', downloadOption.value)
  emit('update:visible', false)
}

const handleCancel = () => {
  emit('update:visible', false)
}
</script>

<style lang="less" scoped>
.batch-download-content {
  p {
    margin-bottom: 16px;
    color: var(--td-text-color-primary);
  }

  .t-radio-group {
    display: flex;
    gap: 12px;
  }
}
</style>
